<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />
		<title>情人节租赁服务</title>
		<link rel="stylesheet" href="<%=path %>/valsday/css/public.css" />
		<link rel="stylesheet" href="<%=path %>/valsday/css/style.css?v=2">
	</head>
	<body>
		<div id="bd" class="bd">
			<form action="<%=path %>/valsday/form.html" id="form" method="post">
				<div class="bd-title">
					<img src="<%=path %>/valsday/img/title.png" alt="" />
				</div>
				<div class="bd-input">
					<img src="<%=path %>/valsday/img/input.png" alt="" />
					<span>
						<input type="text" id="name" placeholder="请输入姓名" name="name"/>
						<input type="hidden" id="imgSrc" name="img"/>
					</span>
				</div>
				<div class="bd-pic">
					<img src="<%=path %>/valsday/img/pic.png" alt="" id="preview"/>
					<span>
						<img src="<%=path %>/valsday/img/k.png" id="preview-k" alt="" />
					</span>
				</div>
				<div class="bd-btn1">
					<img id="chooseImg" src="<%=path %>/valsday/img/btn2.png" alt="" />
					<!-- <span>
						<input type="file" id="file_upload" accept="image/jpg"/>
					</span> -->
				</div>
				<div class="bd-btn2">
					<a href="javascript:formSubmit()"><img src="<%=path %>/valsday/img/btn1.png" alt="" /></a>
				</div>
			</form>
		</div>
		<!--加载资源-->
		<div class="lazy_tip" id="lazy_tip"><span>1%</span><br>	载入中......</div>
		<div class="lazy_cover"></div>
		<div class="resource_lazy hide"></div>
		<div id="pic_edit" class="pic_edit" style="display: none;">
			<div id="clipArea"></div>
			<button id="upload2">选择图片</button>
		    <button id="clipBtn">确定</button>
			<input type="file" id="file" style="opacity: 0;position: fixed;bottom: -100px">
		    <div id="plan" style="display:none">比例剪切后尺寸<canvas id="myCanvas"></canvas><h2 onClick="Close();" style="cursor:pointer; display:inline-block">关闭</h2></div>
		</div>
		<img src="" fileName="" id="hit" style="display:none;z-index: 9">
		<div id="cover"></div>
		<script src="<%=path %>/valsday/js/jquery-2.2.3.min.js" type="text/javascript"></script>
		<script src="<%=path %>/valsday/js/sonic.js"></script>
		<script src="<%=path %>/valsday/js/comm.js"></script>
		<script src="<%=path %>/valsday/js/hammer.js"></script>
		<script src="<%=path %>/valsday/js/iscroll-zoom.js"></script>
		<script src="<%=path %>/valsday/js/jquery.photoClip.js?v=1"></script>
		<script src="<%=path %>/valsday/js/layer.js" type="text/javascript"></script>
		<script src="<%=path %>/valsday/js/lrz.bundle.js" type="text/javascript"></script>
		<script src="<%=path %>/valsday/js/lrz.all.bundle.js" type="text/javascript"></script>
		<script src="<%=path %>/valsday/js/pic.js" type="text/javascript"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script type="text/javascript">
		//微信jssdk config
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${signObj.appid}', // 必填，公众号的唯一标识
			timestamp : '${signObj.timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${signObj.noncestr}', // 必填，生成签名的随机串
			signature : '${signObj.signature}',// 必填，签名，见附录1
			jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
			'onMenuShareTimeline', //分享给好友
			'onMenuShareAppMessage', //分享到朋友圈
			'onMenuShareQZone', //分享到Q空间
			'onMenuShareWeibo',//分享到微博
			'onMenuShareQQ'//分享到qq
			]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		var title="“宣臻”邀你一起过个不虐狗的情人节！ 最后一页有惊喜";
		var description="情人节回馈  最后一页有惊喜";
		var imgUrl="${basePath}/<%=path %>/valsday/img/share.jpg";
		var shareBaseUrl='${baseUrl}';
		wx.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
			wx.onMenuShareTimeline({ //分享到朋友圈的API  
						title : title, // 分享标题
						link : shareBaseUrl+'/auth2.html', // 分享链接
						imgUrl : imgUrl, // 分享图标
						success : function() {
							// 用户确认分享后执行的回调函数
						},
						cancel : function() {
							// 用户取消分享后执行的回调函数
						}
					});
			wx.onMenuShareAppMessage({//分享到朋友 
						title : title, // 分享标题
						desc : description, // 分享描述
						link : shareBaseUrl+'/auth2.html', // 分享链接
						imgUrl : imgUrl, // 分享图标
						type : 'link', // 分享类型,music、video或link，不填默认为link
						dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
						success : function() {
							// 用户确认分享后执行的回调函数
						},
						cancel : function() {
							// 用户取消分享后执行的回调函数
						}
					});
			wx.onMenuShareQZone({//分享到qq空间
			    title: title, // 分享标题
			    desc: description, // 分享描述
			    link: shareBaseUrl+'//auth2.html', // 分享链接
			    imgUrl: imgUrl, // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    	
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareWeibo({
			    title: title, // 分享标题
			    desc: description, // 分享描述
			    link: shareBaseUrl+'/auth2.html', // 分享链接
			    imgUrl: imgUrl, // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    	
			    },
			    cancel: function () { 
			        // 用户取消分享后执行的回调函数
			    }
			});
			wx.onMenuShareQQ({//分享到qq
			    title: title, // 分享标题
			    desc: description, // 分享描述
			    link: shareBaseUrl+'/auth2.html', // 分享链接
			    imgUrl: imgUrl, // 分享图标
			    success: function () { 
			       // 用户确认分享后执行的回调函数
			    	
			    },
			    cancel: function () { 
			       // 用户取消分享后执行的回调函数
			    }
			});
		});
	</script>
		<script>
			var basePath = "${pageContext.request.contextPath }"
			
			/* $(function() {
					$("#file").change(function() {
						uploadfileimgWhich = 1;
						var arr = $(this).val().split(".");
						//alert(this.files[0].length);
						lrz(this.files[0])
				       	 .then(function (rst) {
				            // 处理成功会执行
				            console.log(rst);
				            uploadFile(rst.base64,arr[1]);
				        })
				        .catch(function (err) {
				            // 处理失败会执行
				        })
				        .always(function () {
				            // 不管是成功失败，都会执行
				        });
						var $file = $(this);
						var fileObj = $file[0];
						var windowURL = window.URL || window.webkitURL;
						var dataURL;
						var $img = $("#preview");
						 
						if(fileObj && fileObj.files && fileObj.files[0]){
							dataURL = windowURL.createObjectURL(fileObj.files[0]);
							$img.attr('src',dataURL);
						}else{
							dataURL = $file.val();
							var imgObj = $("#preview");
							imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
							imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;				 
						}				
					});
				});  */
			window.onload=function(){
				var btn1Height=$('.bd-btn1 img').height();
				$('#file_upload').height(btn1Height);
				var picWidth=$('#preview').width();
				$('#preview').height(picWidth);
			}
			function formSubmit(){
				var img = $("#preview").attr("src");
				var name = $("#name").val();
				if(name.length>0){
					if(img == basePath+'/valsday/img/pic.png'){
						layer.open({
						    content: '请选择图片'
						    ,skin: 'msg'
						    ,time: 2 //2秒后自动关闭
						  });
					}else{
						if($("#imgSrc").val()==null||$("#imgSrc").val()==''){
							layer.open({
							    content: '请等待图片上传完成'
							    ,skin: 'msg'
							    ,time: 2 //2秒后自动关闭
							  });
						}else{
							$("#form").submit();
						}
					}	
				}else{
					layer.open({
					    content: '请输入姓名'
					    ,skin: 'msg'
					    ,time: 2 //2秒后自动关闭
					  });
				}
			}
		</script>
		<script>
			var hammer = '';
			var currentIndex = 0;
			var body_width = $('body').width();
			var body_height = $('body').height();

			$("#clipArea").photoClip({
				width: body_width * 0.8125,
				height: body_width * 0.8125,
				file: "#file",
				view: "#hit",
				ok: "#clipBtn",
				loadStart: function () {
					console.log("照片读取中");
					$('.lazy_tip span').text('');
					$('.lazy_cover,.lazy_tip').show();
				},
				loadComplete: function () {
					console.log("照片读取完成");
					$('.lazy_cover,.lazy_tip').hide();
				},
				clipFinish: function (dataURL) {
					$('#hit').attr('src', dataURL);
					saveImageInfo();
				}
			});

			//图片上传
			function saveImageInfo() {
				var filename = $('#hit').attr('fileName');
				var img_data = $('#hit').attr('src');
				if(img_data==""){alert('null');}
				//alert(filename+'|'+img_data);
			   	render(img_data);
			 	var im = img_data.split(":")[1].split(";")[0];
			 	console.log(im);
		            uploadFile(img_data,im);
			}

			/*获取文件拓展名*/
			function getFileExt(str) {
				var d = /\.[^\.]+$/.exec(str);
				return d;
			}

			//图片上传结束
			$(function () {
				$('#upload2').on('click', function () {
					//图片上传按钮
					$('#file').click(); 
				});
				$('#chooseImg').on('click', function () {
					$('#pic_edit').show();
					$('#bd').hide();
				});
				$('#preview-k').on('click', function () {
					$('#pic_edit').show();
					$('#bd').hide();
				});
				
			})


			function Close(){$('#plan').hide();}

			// 渲染 Image 缩放尺寸  
			function render(src){  
				 var MAX_HEIGHT = 256;  //Image 缩放尺寸 
			    // 创建一个 Image 对象  
			    var image = new Image();  
				
			    // 绑定 load 事件处理器，加载完成后执行  
			    image.onload = function(){  
					// 获取 canvas DOM 对象  
			  		var canvas = document.getElementById("myCanvas"); 
			        // 如果高度超标  
			        if(image.height > MAX_HEIGHT) {  
			            // 宽度等比例缩放 *=  
			            image.width *= MAX_HEIGHT / image.height;  
			            image.height = MAX_HEIGHT;  
			        }  
			        // 获取 canvas的 2d 环境对象,  
			        // 可以理解Context是管理员，canvas是房子  
			        var ctx = canvas.getContext("2d");  
			        // canvas清屏  
			        ctx.clearRect(0, 0, canvas.width, canvas.height); 
			        canvas.width = image.width;        // 重置canvas宽高  
			        canvas.height = image.height;  
			        // 将图像绘制到canvas上  
			        ctx.drawImage(image, 0, 0, image.width, image.height);  
			        // !!! 注意，image 没有加入到 dom之中  
					
				 var dataurl = canvas.toDataURL("image/jpeg");  
				 var imagedata =  encodeURIComponent(dataurl);
				 	$('#preview').attr('src',dataurl); 
				  	$('#pic_edit').hide();
					$('#bd').show();
			    };  
			    // 设置src属性，浏览器会自动加载。  
			    // 记住必须先绑定render()事件，才能设置src属性，否则会出同步问题。  
			    image.src = src;	
			};  
			</script>
	</body>
</html>
